<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>市民卡运营平台</title>
    <link rel="shortcut icon" type="image/x-icon" href="../img/logo.png">
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstraptable/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="../lib/adminlte/css/font-awesome.min.css">
    <link rel="stylesheet" href="../lib/adminlte/css/ionicons.min.css">
    <link rel="stylesheet" href="../lib/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../lib/adminlte/css/_all-skins.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body style="line-height:1">
<div class="p20">API接口文档</div>
 <div id="content">
    <div id="div-list">
        <div class="fl">
            <div class="list-group pl10">
                <a v-for="(obj,index) in classes" href="#" class="class-api list-group-item" :data-api-name="obj.clz">
                    {{obj.clz}}
                </a>
            </div>
        </div>
        <div class="fl pl20">
            <div class="page-header">
                <h1>{{currentClass.className}} <small>{{currentClass.clz}}</small></h1>
            </div>
            <div class="list-group">
                <a v-for="(obj,index) in currentClass.methods" class="list-group-item class_method">
                    <h4 class="list-group-item-heading">{{index+1}}&nbsp;[/api{{obj.path}}] &nbsp;{{obj.methodName}}</h4>
                    <p class="list-group-item-text">
                        {{obj.shortResultType}}&nbsp;{{obj.method}}(
                        <span v-for="(objp,indexp) in obj.paramBeanList" >
                            {{objp.shortType}} <span class="pl5">var{{indexp+1}}</span>
                            <span v-if="obj.paramBeanList.length > indexp+1">,</span>
                        </span>
                        )
                    </p>

                    <div class="class-param none">
                        <div class="pt10 pb15 f16 fb">Parameters:</div>
                        <p v-for="(objp,indexp) in obj.paramBeanList" class="list-group-item-text" >
                            var{{indexp+1}} <span class="pl5 pr5">-</span> {{objp.paramName}} 字段含义
                        </p>
                        <span class="pl20"><button id="btn-show-test" :data-method-path="obj.path" type="button" class="btn btn-primary">调试</button></span>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div id="div-api-test" class="none p20">
        <div class="list-group">
            <a class="list-group-item">
                <h4 class="list-group-item-heading">/api{{currentMethod.path}} &nbsp;{{currentMethod.methodName}}</h4>
                <p class="list-group-item-text">
                    {{currentMethod.shortResultType}}&nbsp;{{currentMethod.method}}(
                            <span v-for="(objp,indexp) in currentMethod.paramBeanList" >
                                {{objp.shortType}} <span class="pl5">var{{indexp+1}}</span>
                                <span v-if="currentMethod.paramBeanList.length > indexp+1">,</span>
                            </span>
                    )
                </p>
                <div>
                    <div class="pt10 pb15 f16 fb">Parameters:</div>
                    <p v-for="(objp,indexp) in currentMethod.paramBeanList" class="list-group-item-text" >
                        var{{indexp+1}} <span class="pl5 pr5">-</span> {{objp.paramName}} 字段含义
                    </p>
                </div>
            </a>
        </div>

        <div v-for="(objp,indexp) in currentMethod.paramBeanList" class="input-group pt5 w60p">
            <span class="input-group-addon" id="sizing-addon1">var{{indexp+1}}</span>
            <input type="text" class="form-control">
        </div>

        <div class="p20">
            <button type="button" class="btn btn-primary" id="btn-test-commit">提交</button>
            <button type="button" class="btn btn-primary pl20" id="btn-test-back">返回</button>
        </div>

        <div id="div-test-result">
        </div>
    </div>
 </div>

<script src="../lib/jQuery/jquery-2.2.3.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../lib/bootstraptable/js/bootstrap-table.min.js"></script>
<script src="../lib/validate/jquery.validate.min.js"></script>
<script src="../lib/vue/vue.min.js"></script>
<script src="../js/common.js"></script>
</body>
</html>

<script>
    $(document).ready(function() {
        var contents = new Vue({
            el: '#content',
            data: {
                classes: [],
                currentClass:{},
                currentMethod:{}
            }
        });

        bs.ajax({
            url:"/api/doc/query",
            success:function(dataList) {
                contents.classes = dataList;
            }
        });

        //类列表点击注册
        $(document).on("click",".class-api",function(){
            $(".class-api").removeClass("active");
            $(this).addClass("active");
            var theClz = $(this).attr("data-api-name");
            $.each(contents.classes, function(index, item) {
                if(item.clz == theClz){
                    contents.currentClass = item;
                    return false;
                }
            });
        });

        //参数详情展开
        $(document).on("click",".class_method",function(){
            $("div.class-param").hide();
            $(this).find("div.class-param").show();
        });

        //测试接口
        $(document).on("click","#btn-show-test",function(){
            $("#div-list").hide();
            $("#div-api-test").show();
            $("#div-test-result").text("");
            var currentClass = contents.currentClass;
            var methodPath = $(this).attr("data-method-path");
            $.each(currentClass.methods,function(index, item) {
                if (item.path == methodPath) {
                    contents.currentMethod = item;
                    return false;
                }
            });
        });

        $("#btn-test-back").on("click",function(){
            $("#div-list").show();
            $("#div-api-test").hide();
        });

        $("#btn-test-commit").on("click",function(){
            var url = "/api/"+contents.currentMethod.path;
            console.log(url);
            $.ajax({
                type: 'POST',
                url: url,
                dataType: "json",
                data: {},
                success: function(data){
                    $("#div-test-result").text(JSON.stringify(data,null,"\t"));
                }
            });
        });
    });
</script>